// 放大镜
var leftlogo = document.querySelector('.left-logo')
var logomiddle = leftlogo.querySelector('.logo-middle')
var middleimg = leftlogo.querySelector('.logo-middle img')
var marks = leftlogo.querySelector('.logo-middle .marks')
var logomax = leftlogo.querySelector('.logo-max')
var maximg = leftlogo.querySelector('.logo-max img')
var logomin = leftlogo.querySelector('.logo-min')
var leftbtn = leftlogo.querySelector('.logo-min .leftbtn')
var rightbtn = leftlogo.querySelector('.logo-min .rightbtn')
var smalllogo = leftlogo.querySelector('.logo-min .Smalllogo')
var imgwidth = leftlogo.querySelector('.logo-min .Smalllogo .imgwidth')
var smalllogoimg = leftlogo.querySelectorAll('.logo-min .Smalllogo img')
// 小图片移入事件 - 事件委托
smalllogo.onmouseover = function(e){
    var e = e || window.event
    var target = e.target || e.srcElement
    if(target.nodeName === 'IMG'){
        for(var i=0;i<smalllogoimg.length;i++){
            smalllogoimg[i].className = ''
        }
        console.log(target.src)
        target.className = 'active'
        middleimg.src = target.src
        maximg.src = target.src
    }
}
// 遮罩及大图的移动
logomiddle.onmouseover = function(){
    marks.style.display = logomax.style.display = 'block'
    // 遮罩层的移动
    logomiddle.onmousemove = function(e){
        var e = e || window.event
        var x = e.pageX
        var y = e.pageY
        // 遮罩层移动的距离
        var left = x-logomiddle.offsetLeft-1-marks.offsetWidth/2
        var top = y-logomiddle.offsetTop-1-marks.offsetHeight/2
        // 判断界限值
        if(left<=0){
            left = 0
        }
        if(left>=logomiddle.clientWidth-marks.offsetWidth){
            left = logomiddle.clientWidth-marks.offsetWidth
        }
        if(top<=0){
            top = 0
        }
        if(top>=logomiddle.clientHeight-marks.offsetHeight){
            top = logomiddle.clientHeight-marks.offsetHeight
        }
        // 赋值
        marks.style.left = left +'px'
        marks.style.top = top +'px'
        // 计算大图的移动距离
        var maxleft = left/logomiddle.offsetWidth*maximg.offsetWidth
        var maxtop = top/logomiddle.offsetHeight*maximg.offsetHeight
        maximg.style.left = -maxleft+'px'
        maximg.style.top = -maxtop+'px'
    }
}
logomiddle.onmouseout = function(){
    marks.style.display = logomax.style.display = 'none'
}


